<template>
	<view class="page" :style="themeColor">
		<view class="flex align-stretch benben-position-layout flex myNews_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex align-center justify-between flex-sub myNews_fd0_0'>
				<view class='flex align-center myNews_fd0_0_c0' style="padding-top: 16rpx;">
					<person></person>
				</view>
				<view class='flex align-center'>
					<text class='myNews_fd0_0_c1_c0'>我的消息</text>
				</view>
				<view class='flex align-center myNews_fd0_0_c0'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#6A0002"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout myNews_flex_1" v-else>
			<view style="margin: 8rpx 0;">
				<back></back>
			</view>
			<view class='flex flex-wrap align-stretch myNews_fd1_0' v-for="(v, k) in newsList" :key="k" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/home/platformAnnouncement1682308013/platformAnnouncement1682308013`">
				<view class='flex flex-wrap align-stretch myNews_fd1_0_c0'>
					<image class='myNews_fd1_0_c0_c0' mode="aspectFill" :src='v.thumb'></image>
					<benben-message-num :messageNum="v.unread_nums" class='myNews_fd1_0_c0_c1' size='20' color='#fff' background-color='red'>
					</benben-message-num>
				</view>
				<view class='flex flex-direction flex-wrap align-stretch justify-between flex-sub'>
					<view class='flex flex-wrap align-center myNews_fd1_0_c1_c0'>
						<text class='flex-sub myNews_fd1_0_c1_c0_c0'>{{v.name}}</text>
						<text class='myNews_fd1_0_c1_c0_c1'>{{v.time}}</text>
					</view>
					<view class='flex align-center justify-between myNews_fd1_0_c1_c1'>
						<text class='myNews_fd1_0_c1_c1_c0'>{{v.msg_content}}</text>
						<!-- <view class='flex flex-wrap align-center myNews_fd1_0_c1_c1_c1'>
						</view> -->
						<!-- <text class='myNews_fd1_0_c1_c1_c2'>在线</text> -->
					</view>
				</view>
			</view>
			<!-- <view class='flex flex-wrap align-stretch myNews_fd1_0' @tap.stop="handleJumpDiy" data-type="navigateTo"
				:data-url="`/pages/home/chat/chat`">
				<view class='flex flex-wrap align-stretch myNews_fd1_0_c0'>
					<image class='myNews_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"66.png"'></image>
					<benben-message-num class='myNews_fd1_0_c0_c1' size='20' color='#fff' background-color='red'>
					</benben-message-num>
				</view>
				<view class='flex flex-direction flex-wrap align-stretch justify-between flex-sub'>
					<view class='flex flex-wrap align-center myNews_fd1_0_c1_c0'>
						<text class='flex-sub myNews_fd1_0_c1_c0_c0'>系统消息</text>
						<text class='myNews_fd1_0_c1_c0_c1'>18:20</text>
					</view>
					<view class='flex align-center justify-between myNews_fd1_0_c1_c1'>
						<text class='myNews_fd1_0_c1_c1_c0'>您的202007211804237856订单已送达，您可前往…</text>
						<view class='flex flex-wrap align-center myNews_fd1_0_c1_c1_c1'>
						</view>
						<text class='myNews_fd1_0_c1_c1_c2'>在线</text>
					</view>
				</view>
			</view> -->
		</view>
		<view class="conversition-box" v-if="is_read">
			<view class="list-box" v-if="userAddConversationList.length > 0">
				<t-slide ref="slide" @del="delInfo" :btnArr="btnArr">
					<template v-slot:default="{item}">
						<view class="item-box" @tap.stop="checkUserToRoom(item)">
							<view class="item-img" v-if="item.conversation && item.conversation.userProfile">
								<image :src="item.conversation.userProfile.avatar" mode="aspectFill"></image>
								<view >
									<view class="item-msg-icon" v-if="item.conversation.unreadCount">
										{{ item.conversation.unreadCount }}
									</view>
								</view>
		
							</view>
							<view class="item-box-left">
								<view class="item-text">
									<view class="item-user" v-if="item.conversation && item.conversation.userProfile">
										<text v-if="item.conversation.remark">{{item.conversation.remark}}</text>
										<text v-else>{{ item.conversation.userProfile.nick }}</text>
									</view>
									<view class="item-text-info"
										v-if="item.conversation.lastMessage.payload.data=='voice'">
										[语音]</view>
									<view class="item-text-info"
										v-if="item.conversation.lastMessage.payload.data =='imgs'">
										[图片]</view>
		
									<view class="item-text-info"
										v-if="item.conversation.lastMessage.payload.data!='voice' && item.conversation.lastMessage.payload.data!='imgs'">
										<block v-if="!isJsonObj(item.conversation.lastMessage.payload.text) && item.conversation.lastMessage.payload.text">
											
											<rich-text :nodes="nodesFliter(item.conversation.lastMessage.payload.text)"></rich-text>
										</block>
										<block v-if="isJsonObj(item.conversation.lastMessage.payload.text)">
											<view v-if="updataJson(item.conversation.lastMessage.payload.text).call_type == 1">[语音通话]</view>
											<view v-if="updataJson(item.conversation.lastMessage.payload.text).call_type == 2">[视频通话]</view>
										</block>

										<block v-if="!item.conversation.lastMessage.payload.text">
											<view v-if="item.conversation.lastMessage.payload.data.data.call_type == 1">[语音通话]</view>
											<view v-if="item.conversation.lastMessage.payload.data.data.call_type == 2">[视频通话]</view>
										</block>
										
									</view>
								</view>
								<view class="item-msg">
									<view class="" v-if="item.conversation && item.conversation.lastMessage">
										{{ item.conversation.lastMessage.lastTime | filterHours }}
									</view>
								</view>
							</view>
						</view>
					</template>
				</t-slide>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import tSlide from "@/components/t-slide/t-slide.nvue"
	import back from "@/components/back/index.vue"
	import person from "@/components/person/index.vue"
	export default {
		components: {
			tSlide,
			back,
			person
		},

		data() {
			return {
				"isShow": true,
				"newsList": [],
				"system_notice": {},
				"system_msg": {},
				"interaction_msg": {},
				"userAddConversationList": [],
				"userList": [],
				"btnArr": [{
					name: '删除',
					background: '#6A0002',
					color: '#fff',
					events: 'del'
				}],
				"is_read": true
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
			...mapState({
				isLogin: state => state.isLogin,
				isSDKReady: state => state.isSDKReady,
				conversationList: state => state.conversationList
			})
		},
		filters: {
			filterHours(timestamp) {
				function zeroize(num) {
					return (String(num).length == 1 ? '0' : '') + num;
				}
		
				var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
				var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数
		
				var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
				var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象
		
				var Y = tmDate.getFullYear(),
					m = tmDate.getMonth() + 1,
					d = tmDate.getDate();
				var H = tmDate.getHours(),
					i = tmDate.getMinutes(),
					s = tmDate.getSeconds();
		
				if (timestampDiff < 60) {
					// 一分钟以内
					return '刚刚';
				} else if (timestampDiff < 3600) {
					// 一小时前之内
					return Math.floor(timestampDiff / 60) + '分钟前';
				} else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
					return '今天' + zeroize(H) + ':' + zeroize(i);
				} else {
					var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
					if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
						return '昨天' + zeroize(H) + ':' + zeroize(i);
					} else if (curDate.getFullYear() == Y) {
						return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					} else {
						return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					}
				}
			}
		},
		watch: {
			isSDKReady(val) {
				//isSDKReady == true 请求会话列表
				console.log('初始化===');
				if (val) {
					this.getConversationList();
				}
			},
			conversationList(val) {
				this.getUserInfo(val);
				// this.updateTabBarBadge();
			},
		},
		onLoad(options) {
			
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.getNewsList();
			this.getConversationList();
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			isJsonObj(str) {
				try {
					if (typeof JSON.parse(str) == "object") {
						return true;
					}
				} catch (e) {}
				return false;
			},
			updataJson(str) {
				if (str) {
					return JSON.parse(str);
				}
			},
			updateTabBarBadge() {
				var count = 0;
				count += this.userAddConversationList.reduce((pre, t) => {
					return pre + t.conversation.unreadCount
				}, 0);
				// count += this.interaction_msg.interaction_no_read_num || 0
				// if (count) {
				// 	uni.setTabBarBadge({
				// 		index: 2,
				// 		text: `${count}`
				// 	})
				// } else {
				// 	uni.removeTabBarBadge({
				// 		index: 2
				// 	})
				// }
				// console.log(count);
				this.$store.commit('getNewsCount', count);
			},
			//选择用户聊天
			checkUserToRoom(toUserInfo) {
				this.$store.commit('createConversationActive', toUserInfo.conversation.userProfile.userID);
				let id = (toUserInfo.conversation.userProfile.userID).substring(7, toUserInfo.conversation.userProfile.userID.length);
				uni.navigateTo({
					url: '/pages/home/chat/chat?id=' + id
				})
				// uni.navigateTo({
				// 	url: '/pages/tabBar/news/room?userName=' + toUserInfo.conversation.userProfile.nick +
				// 		'&head_img=' + toUserInfo.conversation.userProfile.avatar + '&source=1'
				// });
			},
			//根据消息列表请求聊天对象的用户信息 并完成数据拼接
			getUserInfo(conversationList) {
				const self = this;
				this.userAddConversationList = [];
			
				conversationList.forEach(item => {
					let obj = {};
					obj.conversation = item;
					self.userList.forEach(item1 => {
						if (item.toAccount == item1.userId) {
							obj.user = item1;
						}
					});
					if (obj.conversation.lastMessage.type == 'TIMTextElem') {

					} else if ((obj.conversation.lastMessage.type == 'TIMCustomElem') && this.isJsonObj(obj.conversation.lastMessage.payload.data)){
						obj.conversation.lastMessage.payload.data = JSON.parse(obj.conversation.lastMessage.payload.data)
						obj.conversation.lastMessage.payload.data.data = JSON.parse(obj.conversation.lastMessage.payload.data.data);
					}
					this.userAddConversationList.push(JSON.parse(JSON.stringify(obj)));
					// this.is_read = false;
					// this.is_read = true;
					this.$nextTick(() => {
						this.$refs.slide.assignment(this.userAddConversationList) //this.dataList 你的数据数组
					})
				});
				console.log('userAddConversationList', this.userAddConversationList);
				
			},
			//聊天的节点加上外层的div
			nodesFliter(str) {
				let nodeStr = '<div style="align-items: center;word-wrap:break-word;">' + str + '</div>';
				return nodeStr;
			},
			//获取消息列表
			getConversationList() {
				// 拉取会话列表
				let promise = this.tim.getConversationList();
				promise
					.then(res => {
						let conversationList = res.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
						if (conversationList.length) {
							//将返回的会话列表拼接上 用户的基本资料
							//说明：如果已经将用户信息 提交到tim服务端了 就不需要再次拼接
							this.$store.commit('updateConversationList', conversationList);
							console.log('消息列表=====', conversationList);
						}
					})
					.catch(err => {
						console.warn('getConversationList error:', err); // 获取会话列表失败的相关信息
					});
			},
			//删除
			delInfo(item) {
				let _this = this;
				// console.log('删除', item)
				let promise = this.tim.deleteConversation(item.conversation.conversationID);
				promise.then(imResponse => {
					// 删除会话成功
					let arr = [];
					_this.$nextTick(() => {
						_this.$refs.slide.assignment(arr);
					})
					_this.getConversationList();
				}).catch(imError => {
					console.log('deleteConversation error:', imError); // 删除会话失败的相关信息
					_this.$message.info('删除失败');
				});
			},
			
			
			// 消息列表
			getNewsList() {
				this.$api.post(global.API_VERSION + '/6439160c0c0a8', {
					
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.newsList = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.conversition-box {
		width: 100%;
		padding: 0 32rpx;
	
		.list-box {
			width: 100%;
	
			.item-text-info {
				width: 100%;
				padding-left: 8rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				word-break: break-all;
				word-wrap: break-word;
				white-space: normal;
				word-break: break-word;
				color: #999;
			}
	
			.item-box {
				width: 100%;
				padding: 25rpx 0;
				box-sizing: border-box;
				display: flex;
				border-bottom: 1rpx solid #f1f1f1
			}
	
			.item-img {
				width: 100rpx;
				position: relative;
				padding-top: 6rpx;
	
				.item-msg-icon {
					position: absolute;
					right: 16rpx;
					top: 0rpx;
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					background: #f06c7a;
					color: #fff;
					line-height: 32rpx;
					text-align: center;
					font-size: 20rpx;
				}
	
				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}
			}
	
			.item-box-left {
				flex: 1;
				display: flex;
				padding-bottom: 10rpx;
				padding-left: 18rpx;
	
				// border-bottom: 1px solid #f1f1f1;
				.item-text {
					flex: 1;
	
					.item-user {
						flex: 1;
						width: 100%;
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;
	
						text {
							max-width: 200rpx;
							min-width: 50rpx;
							font-size: 30rpx;
							font-weight: 700;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							word-break: break-all;
							word-wrap: break-word;
							white-space: normal;
							word-break: break-word;
						}
	
						image {
							width: 50rpx;
							height: 30rpx;
							margin-left: 5px;
						}
					}
				}
	
				.item-msg {
					width: 200rpx;
					font-size: 20rpx;
					color: #999;
					text-align: right;
				}
			}
		}
	}
	
	
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #ffffff;
		background-size: 100% auto !important;
	}

	.myNews_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.myNews_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.myNews_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.myNews_fd0_0_c0 {
		width: 180rpx;
	}

	.myNews_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		// line-height: 88rpx;
	}

	.myNews_flex_1 {
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		background-size: 100% auto !important;
	}

	.myNews_fd1_0_c1_c1_c2 {
		color: #5A912A;
		font-size: 20rpx;
		font-weight: 500;
	}

	.myNews_fd1_0_c1_c1_c1 {
		background: rgba(90, 145, 42, 1);
		width: 6rpx;
		height: 6rpx;
		background-size: 100% auto !important;
		margin: 0rpx 8rpx 0rpx auto;
	}

	.myNews_fd1_0_c1_c1_c0 {
		line-height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		max-width: 400rpx;
	}

	.myNews_fd1_0_c1_c1 {
		border-bottom: 1px solid #eee;
		padding: 0rpx 0rpx 32rpx 0rpx;
	}

	.myNews_fd1_0_c1_c0_c1 {
		line-height: 28rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.myNews_fd1_0_c1_c0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.myNews_fd1_0_c1_c0 {
		margin: 0rpx 0rpx 12rpx 0rpx;
	}

	.myNews_fd1_0_c0_c1 {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
	}

	.myNews_fd1_0_c0_c0 {
		width: 90rpx;
		height: 90rpx;
		border-radius: 45rpx 45rpx 45rpx 45rpx;
	}

	.myNews_fd1_0_c0 {
		margin: 0rpx 32rpx 0rpx 0rpx;
		position: relative;
	}

	.myNews_fd1_0 {
		padding: 32rpx 0rpx 0rpx 0rpx;
	}
</style>